"use client"

import type React from "react"

import { useState } from "react"
import { Search } from "lucide-react"

export default function TokenPriceChart() {
  const [tokenAddress, setTokenAddress] = useState("")
  const [currentAddress, setCurrentAddress] = useState("")
  const [isLoading, setIsLoading] = useState(false)

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (tokenAddress.trim()) {
      setIsLoading(true)
      setCurrentAddress(tokenAddress.trim())
      // The iframe will load, and we'll simulate a brief loading state
      setTimeout(() => setIsLoading(false), 1000)
    }
  }

  return (
    <div className="bg-[#f5f5dc] p-3 rounded-sm w-full">
      <form onSubmit={handleSearch} className="flex mb-3">
        <div className="flex-1 win95-inset bg-white p-1 mr-2">
          <input
            type="text"
            value={tokenAddress}
            onChange={(e) => setTokenAddress(e.target.value)}
            placeholder="Enter Solana token contract address"
            className="w-full bg-transparent border-0 outline-none text-sm"
          />
        </div>
        <button type="submit" className="win95-button bg-[#c0c0c0] px-3 py-1 text-sm flex items-center">
          <Search size={14} className="mr-1" />
          Search
        </button>
      </form>

      <div className="win95-inset bg-white p-1 w-full overflow-hidden rounded-sm">
        {isLoading ? (
          <div className="flex items-center justify-center h-64 text-gray-500 text-sm">
            <div className="flex flex-col items-center">
              <div className="win95-border bg-[#c0c0c0] p-2 mb-2">
                <div className="animate-pulse w-6 h-6 bg-[#000080]"></div>
              </div>
              <p>Loading chart data...</p>
            </div>
          </div>
        ) : currentAddress ? (
          <div className="dexscreener-embed-container">
            <style
              dangerouslySetInnerHTML={{
                __html: `
              .dexscreener-embed-container {
                position: relative;
                width: 100%;
                padding-bottom: 125%;
              }
              @media(min-width: 1400px) {
                .dexscreener-embed-container {
                  padding-bottom: 65%;
                }
              }
              .dexscreener-embed-container iframe {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                border: 0;
              }
            `,
              }}
            />
            <iframe
              src={`https://dexscreener.com/solana/${currentAddress}?embed=1&loadChartSettings=0&chartLeftToolbar=0&chartDefaultOnMobile=1&chartTheme=dark&theme=light&chartStyle=0&chartType=usd&interval=15`}
              title="DexScreener Token Price Chart"
              loading="lazy"
            />
          </div>
        ) : (
          <div className="flex items-center justify-center h-64 text-gray-500 text-sm">
            <div className="text-center p-4">
              <p className="mb-2">Enter a Solana token contract address to view the price chart</p>
              <p className="text-xs">Example: DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263</p>
            </div>
          </div>
        )}
      </div>

      <div className="mt-2 text-right text-xs text-gray-600">Powered by DexScreener</div>
    </div>
  )
}
